<template>
  <div class="border-line card">
    <header-title
      title="人才保租房租住人群分析"
      :style="{ 'font-size': fontSize + 'px' }"
      @fullScreen="handleFullScreen"
    ></header-title>
    <div class="card-content">
      <echarts-view ref="echarts" :options="option" height="300px"></echarts-view>
      <echarts-view ref="echarts1" :options="option1" height="300px"></echarts-view>
      <echarts-view ref="echarts2" :options="option2" height="300px"></echarts-view>
      <echarts-view ref="echarts3" :options="option3" height="300px"></echarts-view>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
import { getCrowd } from '@/api/analysis'
import { setFontSize } from '@/utils/util'
export default {
  props: {
    areaID: {
      type: Number,
      default: 0,
    },
  },
  components: {
    headerTitle,
    echartsView,
  },
  data() {
    return {
      option: {},
      option1: {},
      option2: {},
      option3: {},
      fontSize: 16,
    }
  },
  mounted() {
    this.fetchData()
    window.addEventListener('resize', this.screenAdatper)
  },
  watch: {
    areaID: function (newVal, oldVal) {
      this.fetchData()
    },
  },
  methods: {
    fetchData() {
      const xl = getCrowd({ RegionNo: this.areaID, mode: 'XL' })
      const hj = getCrowd({ RegionNo: this.areaID, mode: 'HJ' })
      const nl = getCrowd({ RegionNo: this.areaID, mode: 'NL' })
      const hy = getCrowd({ RegionNo: this.areaID, mode: 'HY' })
      Promise.all([xl, hj, nl, hy]).then((res) => {
        let totalXl = 0
        let totalHj = 0
        let totalNl = 0
        let totalHy = 0
        res[0].forEach((item, index) => {
          totalXl += item.value
          if (index === res[0].length - 1) {
            res[0].forEach((item) => {
              item.value = Number(((item.value / totalXl) * 100).toFixed())
            })
          }
        })
        res[1].forEach((item, index) => {
          totalHj += item.value
          if (index === res[1].length - 1) {
            res[1].forEach((item) => {
              item.value = Number(((item.value / totalHj) * 100).toFixed())
            })
          }
        })
        res[2].forEach((item, index) => {
          totalNl += item.value
          if (index === res[2].length - 1) {
            res[2].forEach((item) => {
              item.value = Number(((item.value / totalNl) * 100).toFixed())
            })
          }
        })
        res[3].forEach((item, index) => {
          totalHy += item.value
          if (index === res[3].length - 1) {
            res[3].forEach((item) => {
              item.value = Number(((item.value / totalHy) * 100).toFixed())
            })
          }
        })
        this.option = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true,
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            bottom: 0,
            textStyle: {
              color: '#ffffff',
              fontSize: 18,
            },
          },
          title: [
            {
              text: '学历',
              left: '42%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff',
                fontSize: 20,
              },
            },
          ],
          series: [
            {
              name: '学历',
              type: 'pie',
              radius: ['35%', '50%'],
              // avoidLabelOverlap: false,
              center: ['44%', '50%'],
              // label: {
              //   show: false,
              //   position: 'center',
              // },
              label: {
                formatter: '{b} : {d}%',
                color: '#ffffff',
              },
              // itemStyle: {
              //   normal: {
              //     label: {
              //       show: true,
              //       position: 'outside',
              //       formatter: '{b} : {d}%',
              //     },
              //   },
              //   // labelLine: { show: true },
              // },
              tooltip: {
                valueFormatter: function (value) {
                  return value + '%'
                },
              },
              emphasis: {
                label: {
                  show: true,
                  color: '#fff',
                  formatter: '{b}\n{c}%',
                  fontWeight: 'bold',
                },
              },
              // labelLine: {
              //   show: false,
              // },
              data: res[0],
            },
          ],
        }
        this.option1 = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true,
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            bottom: 0,
            textStyle: {
              color: '#ffffff',
              fontSize: 18,
            },
          },
          title: [
            {
              text: '户籍',
              left: '42%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff',
                fontSize: 20,
              },
            },
          ],
          series: [
            {
              name: '户籍',
              type: 'pie',
              radius: ['35%', '50%'],
              avoidLabelOverlap: false,
              center: ['43%', '50%'],
              label: {
                formatter: '{b} : {d}%',
                color: '#ffffff',
                // show: false,
                // position: 'center',
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value + '%'
                },
              },
              emphasis: {
                label: {
                  show: true,
                  color: '#fff',
                  formatter: '{b}\n{c}%',
                  fontWeight: 'bold',
                },
              },
              // labelLine: {
              //   show: false,
              // },
              data: res[1],
            },
          ],
        }
        this.option2 = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true,
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            bottom: 0,
            textStyle: {
              color: '#ffffff',
              fontSize: 18,
            },
          },
          title: [
            {
              text: '年龄',
              left: '53%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff',
                fontSize: 20,
              },
            },
          ],
          series: [
            {
              name: '年龄',
              type: 'pie',
              radius: ['35%', '50%'],
              avoidLabelOverlap: false,
              center: ['55%', '50%'],
              label: {
                formatter: '{b} : {d}%',
                color: '#ffffff',
                // show: false,
                // position: 'center',
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value + '%'
                },
              },
              emphasis: {
                label: {
                  show: true,
                  color: '#fff',
                  formatter: '{b}\n{c}%',
                  fontWeight: 'bold',
                },
              },
              // labelLine: {
              //   show: false,
              // },
              data: res[2],
            },
          ],
        }
        this.option3 = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true,
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            bottom: 0,
            textStyle: {
              color: '#ffffff',
              fontSize: 18,
            },
          },
          title: [
            {
              text: '婚姻',
              left: '64%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff',
                fontSize: 20,
              },
            },
          ],
          series: [
            {
              name: '婚姻',
              type: 'pie',
              radius: ['35%', '50%'],
              avoidLabelOverlap: false,
              center: ['65%', '50%'],
              label: {
                formatter: '{b} : {d}%',
                color: '#ffffff',
                // show: false,
                // position: 'center',
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value + '%'
                },
              },
              emphasis: {
                label: {
                  show: true,
                  color: '#fff',
                  formatter: '{b}\n{c}%',
                  fontWeight: 'bold',
                },
              },
              // labelLine: {
              //   show: false,
              // },
              data: res[3],
            },
          ],
        }
      })
    },
    handleFullScreen() {
      this.$emit('fullScreen')
    },
    screenAdatper() {
      this.$refs.echarts && this.$refs.echarts.chart.resize()
      this.option.fontSize = setFontSize(24)
      this.$refs.echarts.setOptions(this.option)
      this.fontSize = setFontSize(24)
    },
    beforeDestoryed() {
      window.removeEventListener('resize')
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  height: 400px;
  &-content {
    display: flex;
    margin-top: 20px;
  }
}
</style>
